<script setup>
import {ref} from 'vue'
import { DocumentChecked } from "@element-plus/icons-vue";
import {sendVerificationCodeService,getUserInformationService} from '@/api/user'
import {cancelAccountService} from '@/api/user'
import { useUserStore } from '@/stores/user'
import { useRouter } from "vue-router";

const timer=ref()
const seconds=30
const currentSeconds=ref(seconds)
const dialogFormVisible=ref(false)

const verification=ref('')
const userStore = useUserStore()
const router = useRouter();

//调接口发送邮箱验证码
const sendEmailCode= async ()=>{  
    if(timer.value){
        return 
    }
    const {data:{email}}=await getUserInformationService(userStore.userId)
  const res=await sendVerificationCodeService(email)
  console.log(res)
    timer.value=setInterval(() => {
        currentSeconds.value--
        if (currentSeconds.value === 0) {
          currentSeconds.value = seconds
          clearInterval(timer.value)
          timer.value = null
        }
      }, 1000)  
}



const cancelAccount=async()=>{
    //删除
    cancelAccountService(verification.value)
    dialogFormVisible.value=false
    router.push('/login')
    userStore.removeToken()
    ElMessage.success('注销成功')
}
</script>

<template>
    <el-button type="danger" @click="dialogFormVisible=true" round>注销账号</el-button>
    <el-dialog v-model="dialogFormVisible" title="注销验证" width="500">
    <el-form   :model="verification" label-width="auto">
        <el-form-item  required="true"  label="邮箱验证码">
                <el-input
                  style="width: auto"
                  v-model="verification"
                  placeholder="请输邮箱验证码"
                  :prefix-icon="DocumentChecked"
                ></el-input>
                
                <el-button :disabled='currentSeconds != seconds' @click="sendEmailCode()"   style="margin-left: 15px" plain
                  >{{currentSeconds === seconds ? '获取邮箱验证码' : currentSeconds+'秒后重新获取'}}</el-button
                >
                
              </el-form-item>
      
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="cancelAccount">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped></style>